<template>
	<div>
		<div class="main">
			<div>
				    <span @click="CourseList()">
					<img src="https://www.jsu.edu.cn/img/logo.png" style="height: 2.5rem;margin-top: 1rem;"/>
					</span> </div> <div style="text-align: center;margin-top: 1rem;">
						<el-dropdown>
							<span class="el-dropdown-link">
								<el-avatar :src="userPhoto"></el-avatar>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
								<el-dropdown-item @click.native="Person">个人信息</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
			</div>
		</div>
		<div class="main_content">
			<el-row :gutter="20" style="width: 100%;height: 4.875rem;border-bottom: 0.0625rem solid #e3e3e3;line-height:4.875rem;">
				<el-col :span="9">
					<div style="margin-left: 1.875rem;">
						<h2>课程名称软件工程</h2>
					</div>
				</el-col>
				<el-col :span="14" style="font-size: 1.1rem;">
		
					<span :class="{active:Item.value==value}" @click="work(Item.id,Item)" v-for="(Item,index) in List" :key="index" class="Font">{{Item.value}}</span>
					
				</el-col>
			</el-row>
			<div>
				<router-view></router-view>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			const data = [{
				id: 1,
				label: '一级 1',
				children: [{
					id: 4,
					label: '二级 1-1',
				}]
			}, {
				id: 2,
				label: '一级 2',
				children: [{
					id: 5,
					label: '二级 2-1'
				}, {
					id: 6,
					label: '二级 2-2'
				}]
			}, {
				id: 3,
				label: '一级 3',
				children: [{
					id: 7,
					label: '二级 3-1'
				}, {
					id: 8,
					label: '二级 3-2'
				}]
			}];
			return {
				data: JSON.parse(JSON.stringify(data)),
				List: [{
						value: "章节",
						id: 1
					}, {
						value: "考试",
						id: 2
					}, {
						value: "作业",
						id: 3
					},
					{
						value: "统计",
						id: 4
					}, {
						value: "资料库",
						id: 5
					}, {
						value: "管理",
						id: 6
					}, {
						value: "学校管理",
						id: 7
					}
				],
				value: "章节",
				userPhoto:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
			}
		},
		created() {

		},
		methods: {
			handleOpen() {

			},
			handleClose() {

			},
			Home() {
				this.$router.push("/Home");
			},
			append(data) {
				const newChild = {
					id: id++,
					label: 'testtest',
					children: []
				};
				if (!data.children) {
					this.$set(data, 'children', []);
				}
				data.children.push(newChild);
			},

			remove(node, data) {
				const parent = node.parent;
				const children = parent.data.children || parent.data;
				const index = children.findIndex(d => d.id === data.id);
				children.splice(index, 1);
			},
			work(id,Item) {
				this.value=Item.value;
				if(id==1)
				{
					this.$router.push("/chapter");
				}
				if(id==2)
				{
					this.$router.push("/test");
					
				}
				if(id==3)
				{
					this.$router.push("/work");
				}
				if(id==4)
				{
					this.$router.push("/count");
				}
				if(id==5)
				{
					this.$router.push("/means");
				}
				if(id==6)
				{
					this.$router.push("/Administration");
				}
				if(id==7)
				{
					this.$router.push("/SchoolManagement");
				}
			},
			

		},
		created() {
			if (localStorage.getItem("userPhoto")) {
				this.userPhoto = localStorage.getItem("userPhoto");
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main {
		width: 100%;
		height: 4.25rem;
		line-height: 4.25rem;
		display: flex;
		justify-content: space-between;
		color: white;
		background-color: #03d3bd;
	}

	.active {
		color: #03d3bd;
		font-weight: 900;
		// margin-left: 20px;
		// margin-right: 1.25rem;
	}

	.main>div {

		margin-left: 20px;
		margin-right: 1.25rem;
	}

	.main_content {
		// margin-left: 20px;
		// margin-right: 1.25rem;


	}

	.Font {
		margin-left: 1.875rem;
		cursor: pointer;
	}

	.Font:hover {
		color: #03d3bd;
		font-weight: 900;
	}
</style>
